<template>
	<view class="">
		<u-navbar :is-back="true" title="课堂报告" back-icon-color="#ffffff" title-color="#ffffff"
			:background="{backgroundColor:'#E62131'}"></u-navbar>
		<view class="atopheig">
			<view class="topchenlistd" :style="'top:'+height+'px;'">
				<div style="width: 100%;">
					<u-search placeholder="搜老师/课程/内容" v-model="parms.keyword" :clearabled="true" :show-action="false"
						input-align="center" @change="sherchs"></u-search>
				</div>
				<!-- <u-icon name="list-dot" color="#E62131" size="32" @click="modalClick"></u-icon> -->
			</view>
		</view>
		<view class="alltext colors">
			  
		</view>

		<view class="lsitreat" v-for="(item,index) in tabList" :key="index">
			<u-time-line>
				<u-time-line-item nodeTop="2">
					<!-- 此处自定义了左边内容，用一个图标替代 -->
					<template v-slot:node>
						<view class="order" style="background: #E62131;">
							<!-- 此处为uView的icon组件 -->
							<u-icon name="calendar" color="#fff" :size="24"></u-icon>
						</view>
					</template>
					<template v-slot:content>
						<view >
							<view class=""  @click="listAdtops(item)">
								<view class="u-order-title">{{item.commentTime}}</view>
								<view class="u-order-desc">{{item.courseInfo.name}}
								</view>
								<view class="u-order-desc">
									<view class="listta" v-for="(ims,idx) in item.score" :key="idx">
										<span class="kename">{{ims.name}}</span> <u-rate :count="count" :disabled="true"
											v-model="ims.score"></u-rate>
									</view>
								</view>
								<view class="u-order-desc">{{item.comment}}
								</view>
							</view>
							<view class="u-order-desc caozuolsiut fliexs" >
								<view class="lsitas fliexs" v-if="!item.isUp" @click="dianzanclicn(item)">
									<image class="zans" src="../../static/images/zan.png" mode=""></image>
									<span>点赞</span>
								</view>
								<view class="lsitas fliexs" @click="dianzanTwoclicn(item)" v-if="item.isUp == 1">
									<image class="zans" src="../../static/images/zan1.png" mode=""></image>
									<span style="color: #E62131;">已赞</span>
								</view>
								<view class="lsitas fliexs" @click="topages(item)">
									<!-- <image class="zans" src="../../static/images/liuyan.png" mode=""></image> -->
									<image class="zans" src="../../static/images/liuyan1.png" mode=""></image>
									<span style="color: #E62131;">留言</span>
								</view>
							</view>
						</view>
					</template>
				</u-time-line-item>
			</u-time-line>
		</view>


		<u-popup v-model="show" mode="right" z-index="99" :safe-area-inset-bottom="true" width="80%">
			<view class="centers">
				<view class="formsa">
					<view class="" style="padding: 0 10rpx;">
						<u-form :model="form" ref="uForm" label-width="150rpx">
							<u-form-item label="报告日期">
								<span @click="isckickTime(1)">{{form.sTime}}</span> <span
									style="padding: 0 40rpx;">至</span> <span
									@click="isckickTime(2)">{{form.eTime}}</span>
							</u-form-item>
							<u-form-item label="上课日期">
								<span @click="isckickTime(3)">{{form.csTime}}</span> <span
									style="padding: 0 40rpx;">至</span> <span
									@click="isckickTime(4)">{{form.ceTime}}</span>
							</u-form-item>
							<u-form-item label="课程名称"><u-input v-model="form.className" /></u-form-item>

							<u-form-item label="学员姓名"><u-input v-model="form.studentName" /></u-form-item>
						</u-form>
					</view>
					<view class="btnlst fliexs space_between">
						<view class="btn_left center" @click="clichs">
							清空
						</view>
						<view class="btn_left right" @click="oklistTlist">
							确定
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-picker mode="time" v-model="showdate" :params="dateparams" @confirm="confirmdate"
			confirm-color="#E62131"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				show: false,
				showdate: false,
				dateparams: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				form: {
					sTime: '请选择',
					eTime: '请选择',
					csTime: '请选择',
					ceTime: '请选择',
					courseName: '',
					coachName: '',
					className: '',
					studentName: '',
					isAttendance: '',
					texts: "",
				},
				dateindex: 1,
				height: 0,
				count: 5,
				score: [{
					"name": "学习态度",
					"score": 0
				}, {
					"name": "技术掌握",
					"score": 0
				}, {
					"name": "日常表现",
					"score": 0
				}, {
					"name": "团队意思",
					"score": 0
				}, {
					"name": "身体素质",
					"score": 0
				}],
				parms: {
					limit: 15,
					page: 1,
					keyword: "",
					commentStartTime: '',
					commentEndTime: '',
					startTime: '',
					endTime: '',
				},
				tabList:[],
			}
		},
		onLoad() {

		},
		onShow() {
			this.sherchList()
		},
		onReady() {
			this.isheight()
		},
		onReachBottom() {
			this.parms.page += 1
			this.studentworkListApi()
		},
		methods: {
			// 留言
			topages(item) {
				uni.navigateTo({
					url: "./leaveMessage?workId=" + item.workId + '&studentId=' + item.studentId,
				})
			},
			// 点赞
			dianzanclicn(item) {
				let obgs = {
					workId: item.workId,
					studentId: item.studentId,
					leaveType: 1
				}
				uni.$api.common.studentleaveaddLeave(obgs).then((res) => {
					uni.showToast({
						title: "操作成功",
						icon: 'none'
					})
					this.sherchList()
				});
			},
			dianzanTwoclicn(item) {
				let obgs = {
					workId: item.workId,
					studentId: item.studentId,
					leaveType: 1
				}
				uni.$api.common.studentleavedelLeave(obgs).then((res) => {
					uni.showToast({
						title: "操作成功",
						icon: 'none'
					})
					this.sherchList()
				});
			},
			sherchList(){
				this.parms.page = 1;
				this.tabList = [];
				this.studentworkListApi()
			},
			studentworkListApi(){
				uni.$api.common.studentworkreportList(this.parms).then((res) => {
					if(res.count === this.tabList.length){
						uni.showToast({
							title: '没有更多了',
							icon:'none',
							duration: 2000
						});
					}else{
						res.result.forEach((item)=>{
							if (item.score) {
								item.score = JSON.parse(item.score)
							}
							this.tabList.push(item)
						})
					}
				});
			},
			// 去详情
			listAdtops(item) {
				uni.navigateTo({
					url: "./classroomDetail?id="+item.id
				})
			},
			isckickTime(index) {
				this.dateindex = index
				this.showdate = true;
			},
			// 确认时间
			confirmdate(e) {
				if (this.dateindex == 1) {
					this.form.sTime = e.year + '-' + e.month + '-' + e.day
				}
				if (this.dateindex == 2) {
					this.form.eTime = e.year + '-' + e.month + '-' + e.day
				}
				if (this.dateindex == 3) {
					this.form.csTime = e.year + '-' + e.month + '-' + e.day
				}
				if (this.dateindex == 4) {
					this.form.ceTime = e.year + '-' + e.month + '-' + e.day
				}
			},
			// 搜索
			sherchs() {
				this.sherchList()
			},
			modalClick() {
				this.show = true;
			},
			// 清空
			clichs() {
				this.form = {
					courseName: '',
					coachName: '',
					className: '',
					studentName: '',
					isAttendance: '',
					texts: "",
				};
			},
			// 确定
			oklistTlist() {
				this.tablist = [];
				this.classHours = 0
				// if(this.current === 0){
				// 	this.parms.courseName = this.form.courseName
				// 	this.parms.coachName = this.form.coachName
				// 	this.parms.className = this.form.className
				// 	// this.workoutListAPI()
				// }
				// if(this.current === 1){
				// 	this.minaparms.studentName = this.form.studentName
				// 	this.minaparms.isAttendance = this.form.isAttendance
				// 	// this.studentworkListApi()
				// }
				this.show = false
			},
			isheight(){
				uni.getSystemInfo({
					success: (e) => {
						// this.compareVersion(e.SDKVersion, '2.5.0')
						let statusBar = 0
						let customBar = 0
				
				
						// #ifdef MP
						statusBar = e.statusBarHeight
						customBar = e.statusBarHeight + 45
						if (e.platform === 'android') {
							// this.$store.commit('SET_SYSTEM_IOSANDROID', false)
							customBar = e.statusBarHeight + 50
						}
						// #endif
				
				
						// #ifdef MP-WEIXIN
						statusBar = e.statusBarHeight
						// @ts-ignore
						const custom = wx.getMenuButtonBoundingClientRect()
						customBar = custom.bottom + custom.top - e.statusBarHeight
						// #endif
				
				
						// #ifdef MP-ALIPAY
						statusBar = e.statusBarHeight
						customBar = e.statusBarHeight + e.titleBarHeight
						// #endif
				
				
						// #ifdef APP-PLUS
						console.log('app-plus', e)
						statusBar = e.statusBarHeight
						customBar = e.statusBarHeight + 45
						// #endif
				
				
						// #ifdef H5
						statusBar = 0
						customBar = e.statusBarHeight + 45
						// #endif
				
						// 这里你可以自己决定存放方式，建议放在store中，因为store是实时变化的
						console.log(statusBar, customBar, e)
						this.height = customBar;
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.atopheig {
		width: 100%;
		height: 92rpx;
		position: relative;
	}

	.topchenlistd {
		position: fixed;
		left: 0;
		right: 0;
		margin: auto;
		background-color: #ffffff;
		z-index: 22;
		padding: 30rpx 30rpx 15rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.centers {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;

		.formsa {
			width: 100%;
			height: 75%;
		}
	}

	.btnlst {
		margin-top: 350rpx;

		.btn_left {
			width: 50%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			color: #b1b1b1;
			border: 1rpx solid #e1e1e1;
		}

		.right {
			background-color: #E62131;
			color: #ffffff;
		}
	}

	.alltext {
		padding: 15rpx 30rpx;
	}

	.colors {
		color: #606266;
	}

	.lsitreat {
		padding: 0rpx 30rpx;

	}

	.order {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}

	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
	}

	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-top: 30rpx;
	}

	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}

	.listta {
		line-height: 80rpx;

		.kename {
			color: #606266;
		}
	}
	.caozuolsiut{
		text-align: right;
		justify-content: flex-end;
	}
	.lsitas{
		padding-right: 30rpx;
		.zans{
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
		}
	}
</style>